<template>
  <div class="walmart-keyword">
    <div class="page-body">
      <a-form :form="form" :self-update="true">
        <a-form-item :colon="false">
          <span slot="label">
            关键词
          </span>
          <a-input v-decorator="['word', wordOpts]" placeholder="请输入关键词" allow-clear @keyup.enter.native="save" />
        </a-form-item>
      </a-form>
      <div class="btn-wrap">
        <a-button type="primary" :loading="loading" @click="save">
          获取数据
        </a-button>
        <a-button v-show="dataStr.length > 0" type="primary" @click="copyText">
          复制数据
        </a-button>
        <a-button v-show="dupDataStr.length > 0" type="primary" @click="copyDupText">
          复制去重数据
        </a-button>
      </div>
      <a-card class="data-wrap">
        <pre>{{ dataStr }}</pre>
      </a-card>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
  name: 'PageToolIndex',
  layout: 'tool',
  data () {
    return {
      form: this.$form.createForm(this),
      wordOpts: {
        rules: [
          {
            required: true,
            message: '关键词不能为空！'
          }
        ]
      },
      dataStr: '',
      dupDataStr: '',
      loading: false
    };
  },
  mounted () {
    this.setForm({
      word: ''
    });
  },
  methods: {
    setForm (settings) {
      this.form.setFieldsValue({
        word: settings.word
      });
    },
    save () {
      if (this.loading) {
        return;
      }
      this.form.validateFieldsAndScroll((error, values) => {
        if (!error) {
          this.loading = true;
          // values.fresh = true;
          this.$axios.$get('/api/tool/walmartTypeahead', { params: values }).then(({ code, data }) => {
            if (code === 1) {
              data[0][0] = '*';
              const max = data.reduce((a, b) => Math.max(a, b.length), 0);
              const newData : Array<String> = [];
              const regx = /\s*?\(.*?\)\s*?$/ig;
              const rep = (str = '') => str.replace(regx, '');
              const set = new Set();
              for (let i = 0; i < max; i++) {
                const list : Array<String> = [];
                for (let j = 0; j < data.length; j++) {
                  const val = data[j][i];
                  list.push(val);
                  if (i > 0) {
                    set.add(rep(val));
                  }
                }
                newData.push(list.join('\t'));
              }
              this.dataStr = newData.join('\n');
              this.dupDataStr = [...set].join('\n');
            }
            this.loading = false;
          }, () => {
            this.loading = false;
          });
        }
      });
    },
    copyText () {
      return this.$copyText(this.dataStr).then(() => {
        this.$message.success('数据已复制到剪切板！');
      }, e => {
        console.log(e);
        this.$message.error('复制到剪切板失败！');
      });
    },
    copyDupText () {
      return this.$copyText(this.dupDataStr).then(() => {
        this.$message.success('数据已复制到剪切板！');
      }, e => {
        console.log(e);
        this.$message.error('复制到剪切板失败！');
      });
    }
  }
});
</script>

<style scoped>
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #777;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}

.img-tip {
  font-size: 12px;
  line-height: 1;
  margin: 2px 0 17px;
}

.img-tip i {
  position: relative;
  /* top: -1px; */
}

.btn-wrap {
  margin-top: 30px;
}

.btn-wrap button {
  margin-right: 20px;
}

.data-wrap{
  margin-top: 30px;
}
</style>
